<template>
  <div
    class="jy-style-height copyright-box"
    :style="{
      'background-image': `url(${publicUrls + 'free/style1/publicStyle1Bg.png' + '?imageView2/3/format/webp'})`,
    }"
  >
    <div class="copyright-heard">
      <i class="freeIcon" @click="blankHome">&#xe642;</i>
      <span>策展团队</span>
    </div>
    <div class="copyright-content" v-if="commonStore.teamInfo.text">
      <scrollBox
        color="rgba(50, 43, 37, 1)"
        :scrollSrc="publicUrls + 'free/style1/pen.png'"
        v-if="Scrollheights"
        :remarks="commonStore.teamInfo.text"
        :byid="23416"
        :height="getScrollHeight"
      >
        <template #solidBorder>
          <div class="solidBorder-child"></div>
        </template>
      </scrollBox>
    </div>
    <div v-if="!commonStore.teamInfo.text" class="is-null">
      <span>暂无内容</span>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'style1',
});
</script>

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { commonDataStore, useProjectStore } from '@/store';
import { computed, defineComponent, nextTick, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import ScrollBox from '../scrollBox.vue';
import { teamContentInfo } from '@/api/templates/templates';

const commonStore = commonDataStore();
const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const content = ref(null);
const Scrollheights = ref();
const teamInfo = ref();
 
commonStore.getTeamContentDescription();

let viewportHeight = window.innerHeight; 
Scrollheights.value = (viewportHeight / 900) * 470;

const getScrollHeight = computed(() => {
  let rootNode = document.documentElement;

  // 获取计算后的样式
  let computedStyle = window.getComputedStyle(rootNode);
 
  // 读取字体大小（注意这里返回的可能是一个包含单位的字符串，如"16px"）
  let fontSize = computedStyle.fontSize;

  // 如果你需要一个数字值（不带单位）进行计算，你可能需要解析这个字符串
  // 例如，使用正则表达式或split()方法去除单位，并将结果转换为数字
  let fontSizeNumber = parseFloat(fontSize.replace(/[^0-9.-]/g, ''));
  let heights = (fontSizeNumber / 144) * 470;
  return heights;
});

const blankHome = () => {
  router.push({ name: route.meta.loopType ? 'exhibitionHome' : 'templateedit' });
};
</script>
 
<style scoped lang="less">
.copyright-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 120px 0;
  background-size: 100% 100%;
}
.copyright-heard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin-bottom: 24px;
  padding: 0 80px;
  span {
    font-family: SourceHanSerifCN-Bold;
    font-size: 36px;
    line-height: 56px;
    text-align: center;
    color: rgba(50, 43, 37, 1);
  }
  .freeIcon {
    cursor: pointer;
    position: absolute;
    top: 8px;
    left: 80px;
    font-size: 40px;
    line-height: 40px;
    color: rgba(50, 43, 37, 1);
  }
}
.copyright-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  max-width: 1200px;
  width: 1200px;
  height: 560px;
  padding: 40px 80px;
  background: url(https://static.jiyi.show/free/style1/copyrightBg.png) no-repeat center/100% 100%;
}
.copyrightInfo {
  width: 100%;
  height: 100%;
}

.solidBorder-child {
  width: 4px;
  height: 100%;
  border-radius: 1.055px;
  opacity: 0.1;
  background: #6c5c4f;
  box-sizing: border-box;
  border-left: 2px solid rgba(81, 81, 81, 1);
  border-right: 2px solid rgba(81, 81, 81, 1);
}
.is-null {
  margin: 0 auto;
  margin-top: 200px;
  width: 100%;
  text-align: center;
  position: fixed;
  // left: 52%;
  span {
    font-size: 20px;
    line-height: 32px;
    color: rgba(50, 43, 37, 1);
  }
}
</style>